<template>
	<div class="yh_content foSi14">
		<div class="dis disJuB wid100">
			<div class="dis">
				<div class="mar-right15" style="width: 70px;height: 70px;">
					<img :src="infos.headimg" class="wh100 borRad5"/>
				</div>
				<div>
					<div class="dis disAl hei30">
						<div class="mar-right10">{{infos.nickname}}</div>
						<svg-icon v-if="infos.sex === 1" icon-class="son" class="mar0" style="width: 18px;height: 18px;" />
						<svg-icon v-if="infos.sex !== 1" icon-class="gril" class="mar0" style="width: 18px;height: 18px;" />
					</div>
					<div class="dis disAl hei30 mar-top10">
						<div class="mar-right5">当前积分</div>
						<div>{{infos.score}}</div>
					</div>
				</div>
			</div>
			<div class="dis" style="align-items: baseline;">
				<el-button type="primary" @click.stop="back" size="small">返回详情页</el-button>
				<el-button type="primary" @click.stop="shuaVisible = 1" size="small">+增加积分</el-button>
				<el-button type="primary" @click.stop="shuaVisible = 2" size="small">-扣减积分</el-button>
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table :data="list" v-loading="listLoading" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="cancel" label="项目" />
				<el-table-column label="积分">
					<template slot-scope="scope">
						<span>{{scope.row.is_type === 1?'+':'-'}}{{ scope.row.score }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="operator" label="操作人" />
				<el-table-column prop="createtime" label="操作时间" />
				<el-table-column prop="notes" label="备注" />
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getScoreList" />
		</div>
		<div v-if="shuaVisible !== 0" class="zhezhao wh100" />
		<div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 962px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">{{shuaVisible === 2?'扣减积分':'增加积分'}}</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="shuaVisibleClick()" />
					</div>
					<div class="wid100" style="padding: 20px 0;">
						<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
							<div class="wid100 item-l dis" style="padding: 30px 15px 20px;">
								<div class="mar-right15" style="width: 70px;height: 70px;">
									<img :src="infos.headimg" class="wh100 borRad5"/>
								</div>
								<div>
									<div class="dis disAl hei30">
										<div class="mar-right10">{{infos.nickname}}</div>
										<svg-icon v-if="infos.sex === 1" icon-class="son" class="mar0" style="width: 18px;height: 18px;" />
										<svg-icon v-if="infos.sex !== 1" icon-class="gril" class="mar0" style="width: 18px;height: 18px;" />
									</div>
									<div class="dis disAl hei30 mar-top10">
										<div class="mar-right5">当前积分</div>
										<div>1</div>
									</div>
								</div>
							</div>
							<div class="wid100 item-l dis hei42 mar-top10">
								<div class="item-w item-bor item-p dis disAl disJuB">
									<div class="dis disAl">
										<span style="color: #ff0000;">*</span>
										<span> {{shuaVisible === 2?'扣减积分':'增加积分'}}</span>
									</div>
									<el-form-item class="mp0" prop="points">
										<el-input v-model="ruleForm.points" style="width: 140px;" size="small" placeholder="请输入积分" />
									</el-form-item>
								</div>
								<div class="item-w"></div>
							</div>
							<div class="wid100 item-l item-p2 dis disJuB mar-top10">
								<div style="padding-top: 10px;">备注</div>
								<el-input v-model="ruleForm.notes" type="textarea" style="width: 745px;"
										maxlength="500" :rows="4" placeholder="请输入备注" />
							</div>
						</el-form>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
						<div class="mar-right20 que cuPo" style="background: #48a9f3;" @click.stop="submitForm('ruleForm')">确认</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo,
		MemberDetails,
		getScoreList,
		editScore
	} from '@/api/member'
	export default {
		name: 'pointsDetail',
		components: {
			Pagination
		},
		data() {
			const pointsVal = (rule, value, callback) => {
				if (!parseFloat(value) || value % 1 !== 0 || value < 0 || value > 10000000) {
					callback(new Error('请输入1-10000000之间的正整数'))
				} else {
					callback()
				}
			}
			return {
				shuaVisible: 0,
				ruleForm: {
					points: null,
					notes: null,
				},
				rules: {
					points: [{
						required: true,
						trigger: 'blur',
						validator: pointsVal
					}],
				},
				list: null,
				infos: {},
				listLoading: false,
				total: 0,
				listQuery: {
					page: 1,
					limit: 0
				},
				id: null
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			var xuanList = [{
				name: '积分明细',
				url: '/member/pointsDetail?id='+query.id,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			shuaVisibleClick() {
				this.shuaVisible = 0
				this.ruleForm = {
					points: null,
					notes: null
				}
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.getEditScore()
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			getEditScore(){
				var date = {
					'member_id': this.id,
					'score': this.ruleForm.points,
					'oper_type': this.shuaVisible,
					'notes': this.ruleForm.notes,
					'cancel': this.shuaVisible === 1?'增加积分':'减少积分'
				}
				editScore(date).then(response => {
					const {
						data
					} = response
					this.getList()
				}).catch(error => {
					this.shuaVisibleClick()
					console.log(error)
				})
			},
			getScoreList(){
				var date = {
					'member_id': this.id,
					'page': this.listQuery.page
				}
				getScoreList(date).then(response => {
					const {
						data
					} = response
					console.log(data);
					this.total = data.total
					this.list = data.data
				}).catch(error => {
					console.log(error)
				})
			},
			getList(){
				this.shuaVisibleClick()
				var date = {
					'member_id': this.id
				}
				MemberDetails(date).then(response => {
					const {
						data
					} = response
					console.log(data);
					this.infos = data
					this.getScoreList()
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style>
	.monitor-yt-popover {
		border: 2px solid #84878d;
		padding: 20px;
	}

	.monitor-yt-popover .popper__arrow::after {
		top: 0px !important;
		border-bottom-color: #84878d !important;
	}
</style>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		min-width: 150px;
		font-size: 12px;
		color: #838383;
		margin-bottom: 15px;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: rgb(32, 146, 48);
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	.btn-group_top {
	    text-align: right;
	}
</style>
